// TypeScript是JavaScript的超集
// https://www.bilibili.com/video/BV1H44y157gq/?spm_id_from=333.337.search-card.all.click

// ts就是一个强类型版本的js

// 定义字符串
let str: string = "hello";

// 定义数字
let count: number = 10;

// 定义布尔值
let show: boolean = true;

// 定义undefined
let udf: undefined = undefined;

// 定义null
let nl: null = null;

// 需要从浏览器的本地存储中去获取一些信息
// let token: string | null = localStorage.getItem("token");
// console.log(token && token.length);

// 联合类型
let a: number | string | boolean = 10;
a = "10";
a = true;


// 定义数组
let arr: number[] = [1,2,3,4,5];
let arr2: Array<number> = [1,2,3,4,5];
let arr3: (number | string)[] = [1, 2, "abc"];


// 定义对象
// 需要先定义一个interface接口
interface ObjType {
  name: string;
  age: number;
  sex?: string;
  [propName: string]: any;
}
let obj: ObjType = {
  name: "zhangsan",
  age: 20,
}
let obj2: ObjType = {
  name: "lisi",
  age: 30,
  sex: "男",
  a: 111,
  fn: function() {}
}


// 函数类型
// 函数需要写的是返回值的类型
function fn(): number {
  return 123
}

function fn2(a: string, b: number): string {
  return a + b
}
fn2("3", 4);



// 箭头函数
let fn3 = function (a, b) {
  console.log(this); // 如果在浏览器上，默认指向window
  return a + b;
}
fn3(3,4)
// 是可以改写成箭头函数
// this
let fn4: (a: number, b: number) => number = (a: number, b: number): number => {
  console.log(this); // this是指向外层
  return a + b
}

// void表示函数没有返回值
let fn5: () => void = (): void => {
  console.log("123");
}
// 省略了function关键字，简单一些
// this(上下文环境)指向和普通函数不一样
// 普通函数this执行调用者，箭头函数的this指向外层